import React, {FC, useRef, useState} from 'react';
import {TouchableOpacity, Image, Animated, StyleSheet} from 'react-native';
import icon_heart from '../../assets/icon_heart.png';
import icon_heart_empty from '../../assets/icon_heart_empty.png';
type PropsType = {
  value: boolean;
  onValueChange?: (value: boolean) => void;
  size?: number;
};
const Heart: FC<PropsType> = (props: PropsType) => {
  const {value, onValueChange, size = 20} = props;
  const [showState, setShowState] = useState<boolean>(value);
  const scale = useRef<Animated.Value>(new Animated.Value(0)).current;
  const scaleAnimated = Animated.timing(scale, {
    toValue: 2,
    duration: 300,
    useNativeDriver: false,
  });
  const alpha = useRef<Animated.Value>(new Animated.Value(1)).current;
  const alphaAnimated = Animated.timing(alpha, {
    toValue: 0,
    duration: 300,
    useNativeDriver: false,
    delay: 200,
  });
  const styles = StyleSheet.create({
    img: {
      width: size,
      height: size,
      resizeMode: 'contain',
    },
    bg: {
      width: size,
      height: size,
      borderRadius: size / 2,
      borderWidth: size / 20,
      position: 'absolute',
      borderColor: '#ff2442',
      transform: [{scale: scale}],
      opacity: alpha,
    },
  });

  const onHeartPress = () => {
    const newState = !showState;
    setShowState(newState);
    onValueChange?.(newState);
    if (newState) {
      Animated.parallel([scaleAnimated, alphaAnimated]).start();
    } else {
      scale.setValue(0);
      alpha.setValue(1);
    }
  };

  return (
    <TouchableOpacity onPress={onHeartPress}>
      <Image
        style={styles.img}
        source={showState ? icon_heart : icon_heart_empty}
      />
      <Animated.View style={styles.bg} />
    </TouchableOpacity>
  );
};

export default Heart;
